<!-- 
  @name: 优惠券
  @date: 2020.1.10
 -->
<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="fixed_top">
			<u-tabs-swiper 
				ref="tabs" 
				:list="tabList" 
				:current="tabIndex"
				name="title" 
				active-color="#0DC887" 
				@change="onClickItem"
				:is-scroll="false">
			</u-tabs-swiper>
			<!-- <tab-card :tab-list="tabList" @click-item="onClickItem"></tab-card> -->
		</view>

		<!-- <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view 
					scroll-y style="height: 800rpx;width: 100%;" 
					@scrolltolower="onreachBottom">
					
				</scroll-view>
			</swiper-item>
		</swiper> -->
		<!-- 优惠券 -->
		<view class="ticket" v-if="lists.length > 0">
			<view
				class="info"
				:style="{
					opacity: tabIndex !== 0 ? '0.6' : '',
					backgroundImage:
						tabIndex !== 2
							? 'url(http://img.etubang.com/group1/M00/00/40/rBCky15UyDGAUawTAAAib7UahR0786.png)'
							: 'url(http://img.etubang.com/group1/M00/00/40/rBCky14YGGqAdD1xAAAyl3gjsIE118.png)'
				}"
				v-for="(item, index) in lists"
				:key="item.couponId"
			>
				<view class="left">
					<view class="mey">
						<text class="icon-1">￥</text>
						<text class="text-1" :class="item.couponAmount.length > 5 ? 't2' : ''">{{ item.couponAmount }}</text>
					</view>
					<view class="fs" @tap="goCanable(item, index)">
						<text class="text-2">可用站点</text>
						<view class="icon-2"></view>
					</view>
				</view>
				<view class="middle">
					<view class="text-1 text_over">{{ item.operName }}</view>
					<view class="text-2 text_over">加注满{{ item.couponOrderAmount }}元可用</view>
					<view class="text-3">{{ item.useBeginTime.replace(/-/g, '.') }}-{{ item.useEndTime.replace(/-/g, '.') }}</view>
				</view>
				<view class="right bg1" v-if="tabIndex === 0" @tap="goCanable(item, index)">去使用</view>
				<view class="right bg1" v-else-if="tabIndex === 1">已使用</view>
				<view class="right bg2" v-else>已过期</view>

				<!-- 已过期图片 -->
				<view class="overdue-img" v-show="tabIndex === 2"></view>
			</view>

			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>

		<!-- 没有优惠券时 -->
		<view class="no_lists" v-if="lists.length === 0">
			<image src="../static/wxImage/bg-noCoupon.png" mode="aspectFill"></image>
			<text class="tip">暂无优惠券</text>
		</view>

		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [{ title: '未使用' }, { title: '已使用' }, { title: '已过期' }], //选项卡
			tabIndex: 0, //选项卡初始面板
			lists: [], //优惠券列表
			page0: 1, //未使用页码
			list0: [], //未使用列表
			page1: 1, //已使用页码
			list1: [], //已使用列表
			page2: 1, //已过期页码
			list2: [], //已过期列表
			isOnShow: false //是否第二次打开此页面，true是第二次，false是初次打开
		};
	},
	watch: {
		list0(newVal, oldVal) {
			if (this.tabIndex === 0 && newVal !== this.lists) {
				this.lists = this.list0;
			}
		},
		list1(newVal, oldVal) {
			if (this.tabIndex === 1 && newVal !== this.lists) {
				this.lists = this.list1;
			}
		},
		list2(newVal, oldVal) {
			if (this.tabIndex === 2 && newVal !== this.lists) {
				this.lists = this.list2;
			}
		}
	},
	onLoad() {
		this.getList(0); //初始tabIndex为0，获取未使用
	},
	onReachBottom() {
		this.$store.commit('btmLoad', true);
		this.getList(this.tabIndex);
	},
	onPullDownRefresh() {
		this.reLogin();
	},
	methods: {
		//重新登录
		reLogin() {
			switch (this.tabIndex) {
				case 0:
					this.list0 = [];
					this.page0 = 1;
					break;
				case 1:
					this.list1 = [];
					this.page1 = 1;
					break;
				case 2:
					this.list2 = [];
					this.page2 = 1;
					break;
			}
			this.getList(this.tabIndex);
		},
		//前往可用站点
		goCanable(item, index) {
			this.$navigateTo('/pagesUc/site/busi?onSite=a&couponId=' + item.couponId);
		},
		//点击选项卡
		onClickItem(index) {
			if (this.tabIndex !== index) {
				this.tabIndex = index;
				switch (index) {
					case 0:
						this.lists = this.list0;
						break;
					case 1:
						this.lists = this.list1;
						break;
					case 2:
						this.lists = this.list2;
						break;
				}
				if ((index === 0 && this.page0 === 1) || (index === 1 && this.page1 === 1) || (index === 2 && this.page2 === 1)) {
					this.getList(this.tabIndex);
				}
				uni.pageScrollTo({ scrollTop: 0, duration: 200 });
			}
		},
		//获取优惠券
		getList(status) {
			let page = 1;
			switch (status) {
				case 0:
					page = this.page0;
					break;
				case 1:
					page = this.page1;
					break;
				case 2:
					page = this.page2;
					break;
			}
			this.$http({
				url: this.$api.couponUrl + 'getusercouponpage',
				data: {
					couponStatus: status,
					page: page,
					rows: this.$tmp.ROWS_RET
				},
				loading: page > 1 ? 0 : ''
			}).then(res => {
				let arr = res.lstCoupon;
				if (arr && arr.length > 0) {
					switch (status) {
						case 0:
							this.list0 = this.list0.concat(arr);
							this.page0 += 1;
							break;
						case 1:
							this.list1 = this.list1.concat(arr);
							this.page1 += 1;
							break;
						case 2:
							this.list2 = this.list2.concat(arr);
							this.page2 += 1;
							break;
					}
				}
				if (!this.isOnShow) {
					this.isOnShow = true;
					this.tabList[0].title = this.tabList[0].title + ' ' + res.unUseNum;
					this.tabList[1].title = this.tabList[1].title + ' ' + res.useNum;
					this.tabList[2].title = this.tabList[2].title + ' ' + res.overNum;
					//this.$forceUpdate();  //强制刷新组件
				}
			});
		}
	}
};
</script>

<style lang="scss">
.tab-card {
	border-top: 1rpx solid $color-list;
}

/* 优惠券 */
.ticket {
	width: 750rpx;
	height: auto;
	margin-top: $tab-card-heg + 2rpx;
	.info {
		display: flex;
		flex-direction: row;
		width: 709rpx;
		height: 228rpx;
		padding: 10rpx;
		margin: 0 20rpx;
		margin-top: 15rpx;
		position: relative;
		.overdue-img {
			position: absolute;
			top: -5rpx;
			right: -5rpx;
			width: 125rpx;
			height: 125rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14YGRGAR-ZeAABFyqwezdo857.png');
		}
		.left {
			width: 160rpx;
			text-align: center;
			.mey {
				width: 100%;
				margin-top: 50rpx;
				text-align: center;
				color: $color-white;
			}
			.icon-1 {
				font-size: 30rpx;
			}
			.text-1 {
				font-family: $font-family-num;
				font-size: 46rpx;
				margin-left: 4rpx;
			}
			.text-1.t2 {
				font-size: 38rpx;
			}
			.fs {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
			.text-2 {
				color: $color-white;
				font-size: 24rpx;
			}
			.icon-2 {
				width: 12rpx;
				height: 21rpx;
				margin-left: 10rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_62ADVMnAAAA5kpefWc398.png');
			}
		}
		.middle {
			flex: 1;
			padding-left: 35rpx;

			.text-1 {
				margin-top: 32rpx;
			}
			.text-2 {
				margin-top: 20rpx;
				font-size: 30rpx;
			}
			.text-3 {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-family: $font-family-num;
			}
		}
		.right {
			width: 84rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			font-size: 24rpx;
			color: $color-white;
			margin-top: 80rpx;
			margin-right: 20rpx;
			border-radius: $border-radius-sm;
		}
		.right.bg1 {
			background: $color-primary;
		}
		.right.bg2 {
			background: $color-disable;
		}
	}
}

/* 没有优惠券时 */ 
.no_lists {
	padding-top: 400rpx;
	
	image {
		width: 490rpx;
		height: 260rpx;
	}
}
</style>
